<template>
  <div>
    <h2>文章管理</h2>

    <el-table :data="articles" border style="width: 100%">
      <el-table-column prop="author" label="账号" />
      <el-table-column prop="title" label="标题" />
      <el-table-column label="标签">
        <template #default="{ row }">
          <el-tag
            v-for="tag in limitedTags(row.tags)"
            :key="tag.id"
            type="success"
            size="small"
            class="tag-item"
          >
            {{ tag.name }}
          </el-tag>
          <span
            v-if="row.tags.length > 3"
            class="tag-more"
            @click="openTagDialog(row.tags)"
          >
            +{{ row.tags.length - 3 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="内容摘要">
        <template #default="{ row }">
          {{ plainText(row.content) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button
            size="small"
            type="danger"
            @click="confirmDelete(row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 标签弹窗 -->
    <el-dialog
      v-model="tagDialogVisible"
      title="全部标签"
      width="400px"
      :lock-scroll="false"
    >
      <div class="tag-dialog-body">
        <el-tag
          v-for="tag in tagDialogTags"
          :key="tag.id"
          type="info"
          size="default"
          class="tag-item"
        >
          {{ tag.name }}
        </el-tag>
      </div>
      <template #footer>
        <el-button @click="tagDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getAllArticles, deleteArticle } from '@/api/article'
import removeMd from 'remove-markdown'

interface Tag {
  id: number
  name: string
}

interface Article {
  id: number
  title: string
  author: string
  content: string
  tags: Tag[]
}

const articles = ref<Article[]>([])
const tagDialogVisible = ref(false)
const tagDialogTags = ref<Tag[]>([])

// 初始化加载文章
onMounted(loadArticles)

async function loadArticles() {
  try {
    const res = await getAllArticles()
    if (res.code === 0 && Array.isArray(res.data)) {
      articles.value = res.data
    } else {
      ElMessage.error(res.message || '获取文章列表失败')
    }
  } catch {
    ElMessage.error('请求文章列表失败')
  }
}

function limitedTags(tags: Tag[]) {
  return tags.slice(0, 3)
}

function openTagDialog(tags: Tag[]) {
  tagDialogTags.value = tags
  tagDialogVisible.value = true
}

function plainText(md: string) {
  const text = removeMd(md || '')
  return text.length > 50 ? text.slice(0, 50) + '...' : text
}

function confirmDelete(article: Article) {
  ElMessageBox.confirm(`确定要删除《${article.title}》吗？`, '提示', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => performDelete(article.id))
}

async function performDelete(id: number) {
  try {
    const res = await deleteArticle(id)
    if (res.code === 0) {
      ElMessage.success('删除成功')
      await loadArticles()
    } else {
      ElMessage.error(res.message || '删除失败')
    }
  } catch {
    ElMessage.error('请求删除文章失败')
  }
}
</script>

<style scoped>
.tag-item {
  margin-right: 4px;
  margin-bottom: 4px;
}
.tag-more {
  color: #409EFF;
  cursor: pointer;
  font-size: 12px;
  margin-left: 6px;
  user-select: none;
}
.tag-dialog-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
</style>
